<html>
<head>
    <title>Upload file</title>
    <style>
        #progress {
            height: 10px;
            width: 500px;
            border: 1px solid gold;
            position: relative;
            border-radius: 5px;
        }

        #progress .progress-item {
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background: chartreuse;
            border-radius: 5px;
            transition: width .3s linear;
        }
    </style>
</head>
<body>
<input type="file" name="uploadFile" id="uploadFile"/>
<input type="submit" value="upload" id="upload"/>
<br>显示进度条<br>
<div id="progress">
    <div class="progress-item"></div>
</div>
<span id="progress2">
</span><br>
上传成功后的返回内容<br>
<span id="speed">
</span><br>
<span id="speed2">
</span>
<span id="callback"></span>
</body>
<script>

    window.onload = function () {
        var a = 0;
        var b = 0;
        if (document.readyState == "complete") {
            //首先监听input框的变动，选中一个新的文件会触发change事件
            document.querySelector("#upload").addEventListener("click", function () {
                //获取到选中的文件
                var startTime = new Date().getTime();

                var lastTime=startTime
                var lastLoad=0
                var file = document.querySelector("#uploadFile").files[0];
                //创建formdata对象
                var formdata = new FormData();
                formdata.append("file", file);
                //创建xhr，使用ajax进行文件上传
                var xhr = new XMLHttpRequest();
                xhr.open("post", "/upload");
                //回调
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        document.querySelector("#callback").innerText = xhr.responseText;
                    }
                }
                //获取上传的进度
                xhr.upload.onprogress = function (event) {
                    var processTime=new Date().getTime();
                    var processSeconds=(processTime-startTime)/1000
                    var currentSeconds=(processTime-lastTime)/1000
                    if (event.lengthComputable) {
                        var percent = event.loaded / event.total * 100;
                        document.querySelector("#progress .progress-item").style.width = percent + "%";
                        document.querySelector("#progress2").innerText = percent + "%";
                    }
                    console.log(event.loaded)
                    console.log("process seconds = "+processSeconds)

                    if(currentSeconds>=1){
                         var currentSpeed=Math.round((event.loaded-lastLoad)/(currentSeconds*1024));
                         var avgSpeed=Math.round((event.loaded)/(processSeconds*1024));
                         debugger
                         var currentSpeedMb=Math.round(currentSpeed/1024);
                         var avgSpeedMb=Math.round(avgSpeed/1024);

                         console.log(processSeconds+"秒内的平均速度"+avgSpeed+"KB/s")
                         console.log("最近"+currentSeconds+"秒内的即时速度"+avgSpeed+"KB/s")
                         lastLoad=event.loaded
                         lastTime=processTime
                         document.querySelector("#speed").innerText = processSeconds+"秒内的平均速度"+avgSpeed+"KB/s,"+avgSpeedMb+"MB/s";
                         document.querySelector("#speed2").innerText = "最近"+currentSeconds+"秒内的即时速度"+currentSpeed+"KB/s" + currentSpeedMb +"MB/s";

                    }
                }
                //将formdata上传
                xhr.send(formdata);
            });
        }

        if (document.readyState == "loading") {

        }
    }
</script>

</html>
